{extend name="../index/public/mlay" /}
{block name="style"}
<style>
	.tabar .active {
		color: #BFA073;
		font-size: 0.85rem;
		font-weight: bold;
		position: relative;
	}

	.buttom {
		display: inline-block;
		background: #e6c358;
		border-radius: 30px;
		font-size: 0.7rem;
		padding: 0.1rem 0.4rem;
	}

	/* .active::before {
		content: "";
		display: block;
		height: 2px;
		background-image: linear-gradient(120deg, #BFA073, #BFA073);
		position: absolute;
		bottom: -5px;
		left: 50%;
		width: 50%;
		transform: translateX(-50%);
	} */
</style>
<!-- 公共css样式在这里 弹性布局也在这里 -->
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
{/block}
{block name="header"}{/block}
{block name="container"}
<div id="app">
	<div class="flex ju_sb tabar"
		style="padding: 0.5rem 1rem;font-size: 0.75rem;position: fixed;top: 0;width: 100%;background: #ffffff;">
		<div @click="tab(item.id)" v-for="(item,index) in Data" :key="item.id" :class="{active:isActive==item.id}"
			class="" v-cloak>
			{{item.title}}
		</div>
	</div>
	<div style="height: 2.5rem;" class=""></div>
	<div v-if="this.List.length!=0" class="">
		<div v-for="(item,index) in List" :key="index" class="bagfff"
			style="border-radius: 0.5rem;margin:0.5rem;padding: 20px 0.5rem;">
			<div class="flex ju_sb ai_center">
				<img style="height: 0.8rem;" v-cloak :src="item.cover">
				<div style="flex: 1;margin-left: 0.5rem;" class="">
					<div class="flex ju_sb">
						<div style="font-size: 0.75rem;flex: 1;" class="" v-cloak>
							{{item.title}}
						</div>
						<div style="font-size: 0.7rem;" class="" v-cloak>
							{{item.pay_time}}
						</div>
					</div>
					<!-- <div style="font-size: 0.6rem;margin-left: 10px;">¥{{item.pay_price}}</div>
				<div style="text-align: right;font-size: 0.65rem;margin: 1rem 0;" class="">
					<span style="color: #C5C5C5;">共{{item.number}}件 </span>小计:<span style="color: #a98c2e;">￥{{item.pay_price}}</span>
				</div> -->
				</div>
			</div>
			<div v-for="(ite,index) in item.list" style="margin-top: 0.5rem;" class="">
				<div class="flex ju_sb">
					<img style="width: 3.75rem;height: 3.75rem;border-radius: 0.5rem;" v-cloak :src="ite.cover">
					<div style="flex: 1;margin-left: 0.5rem;" class="">
						<div class="flex ju_sb">
							<div style="font-size: 0.75rem;flex: 1;" class="" v-cloak>
								{{ite.title}}
							</div>
							<div style="font-size: 0.7rem;" class="" v-cloak>
								{{ite.pay_time}}
							</div>
						</div>
						<div style="font-size: 0.6rem;margin-left: 10px;" v-cloak>¥{{ite.pay_price}}</div>
						<div style="text-align: right;font-size: 0.65rem;margin: 1rem 0;" class="">
							<span style="color: #C5C5C5;" v-cloak>x{{ite.number}} </span><span style="color: #a98c2e;"
								v-cloak>￥{{ite.pay_price}}</span>
						</div>
					</div>
				</div>
			</div>
			<div style="text-align: right;" class="">
				<span @click="pay(item)" class="buttom">查看详情</span>
				<span @click="pay(item)" v-if="item.status==0" class="buttom">
					去付款
				</span>
				<span @click="pay(item)" v-if="item.status==1" class="buttom">
					待发货
				</span>
				<span @click="pay(item)" v-if="item.status==2" class="buttom">
					待收货
				</span>
				<span @click="pay(item)" v-if="item.status==3" class="buttom">
					已完成
				</span>
				<span @click="pay(item)" v-if="item.status==4" class="buttom">
					已退款
				</span>
			</div>
		</div>
	</div>
	<div v-else class="" style="text-align: center;margin-top: 5rem;color: #b3b3b3;">
		<img src="__TEM_STATIC__/img/icon/there_is_no_order.png" >
		<p>您还没有相关的订单</p>
	</div>
</div>
{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="__TEM_STATIC__/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	var active = "{$Request.param.status}";
	console.log(active)
	if (active == '' && active <= 0) {
		active = 99
	}
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				isActive: active,
				Data: {$status|json_encode|raw},
				List: [],
				page: 1, //页数
				last_page: '', //总页数
				isLoadding: false,
			}
		},
		//计算属性	
		computed: {},
		//监听属性
		watch: {},
		//钩子函数	
		created() {
			this.shuju()
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
		},
		methods: {
			handleScroll() {
				//变量scrollTop是滚动条滚动时，距离顶部的距离
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				//变量windowHeight是可视区的高度
				var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
				//变量scrollHeight是滚动条的总高度
				var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				//滚动条到底部的条件
				if (scrollTop + windowHeight >= scrollHeight && vm.isLoadding == false) {
					//加载数据的函数
					// console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
					if (this.page < this.last_page) {
						this.page++
						this.shuju();
					}
				}
			},
			tab(index) {
				this.isActive = index
				window.location.href = "{:real_url('mall/order/index')}/status/" + index
			},
			shuju: function() {
				let that = this
				var loading = weui.loading('loading', {
					content: '正在载入'
				});
				$.post("", {
					page: that.page
				}, function(res) {
					that.last_page = res.data.last_page //最后页数
					// that.List = res.data.items
					if (that.page > 1) {
						that.List = that.List.concat(res.data.items);
						console.log(that.List);
						that.show = true
					} else {
						that.List = res.data.items
					}
					loading.hide();
					console.log(that.List);
					console.log(res);
				});
			},
			pay(item) {
				console.log(item.id)
				window.location.href = "{:real_url('mall/order/detail')}/id/" + item.id
			},
		}
	})
	//  返回到指定页面
	// history.pushState(history.length-1, " ", window.location.href.split('#')[0] + "#" + new Date().getTime());
	// if (navigator.userAgent.indexOf('Android') != -1) {
	//    if (typeof(tbsJs) != "undefined") {
	//      tbsJs.onReady('{useCachedApi : "true"}', function(e) {});
	//      window.onhashchange = function() {
	//        location.href = 'https://mall.anheyuan.cn/user/member/index.html';
	//      };
	//    } else {
	//      window.onhashchange = function(event) {
	//          history.go(-1);
	//      };
	//    }
	//  } else {
	//    window.onhashchange = function() {
	//        location.href = 'https://mall.anheyuan.cn/user/member/index.html';	
	//    };
	//  }
</script>
{/block}
